<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>评论</title>
<!--    <link rel="stylesheet" href="./index.css">-->
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>


    <link href="/static/v5/static/h-ui/css/H-ui.min.css" rel="stylesheet" type="text/css" />



    <link rel="stylesheet" type="text/css" href="/static/v5/css/kkpager_blue.css" />
    <style>
        .CommentUser {
            font-size: 12px;
            width: 100%;
            padding: 10px;
            display: flex;
            flex-wrap: nowrap;
            font-family: Microsoft YaHei;
            margin: 10px 0;
            /*border:1px solid #000;*/
            position: relative;
        }
        .CommentUser .disNone {
            display: none;
        }
        .CommentUser .blue {
            color: #0294EC;
            cursor: pointer;
        }
        .CommentUser .arrows {
            font-size: 30px;
            position: absolute;
            left: 0;
            top: -20px;
        }
        .CommentUser .userPortrait {
            width: 51px;
            height: 51px;
            border-radius: 50%;
        }
        .CommentUser .commentBox {
            max-width: 94%;
            flex: 1;
            padding: 0 10px;
        }
        .CommentUser .commentBox .time {
            font-size: 12px;
            color: #ACABAB;
            margin-left: 10px;
        }
        .CommentUser .commentBox .userName {
            font-size: 16px;
            font-weight: bold;
            border-radius: 50%;
        }
        .CommentUser .commentBox .userComment {
            width: 100%;
            overflow: hidden;
            font-size: 16px;
            font-weight: 500;
            word-wrap: break-word;
            margin: 10px 0;
            color: #666666;
            -webkit-line-clamp: 5;
        }
        .CommentUser .commentBox .footer {
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: 500;
            display: flex;
            justify-content: space-between;
        }
        .CommentUser .commentBox .footer .operation1 {
            width: 100%;
            color: #666666;
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
        }
        .CommentUser .commentBox .footer .operation1 .commentIcon {
            cursor: pointer;
        }
        .CommentUser .commentBox .footer .operation1 .commentIcon img {
            width: 14px;
            height: 14px;
        }
        .CommentUser .commentBox .footer .operation1 .commentIcon:hover {
            color: #0294EC;
        }
        .CommentUser .commentBox .footer .operation1 .iconBox {
            margin-right: 20px;
            cursor: pointer;
            display: inline-flex;
            align-items: flex-end;
        }
        .CommentUser .commentBox .footer .operation1 .iconBox .iconfont {
            margin-right: 6px;
            font-size: 14px;
        }
        .CommentUser .commentBox .footer .operation1 .iconBox .icon-changyongicon- {
            font-size: 18px;
        }
        .CommentUser .commentBox .footer .operation1 .iconBox .like {
            color: red;
        }
        .CommentUser .commentBox .footer .input {
            margin-top: 26px;
            position: absolute;
            width: 100%;
            height: 1px;
        }
        .CommentUser .subComment {
            padding: 10px 10px;
            border: 1px solid #ccc;
            background: #f5f5f5;
            border-radius: 8px;
        }
        /*# sourceMappingURL=index.css.map */
    </style>
</head>
<body>
<nav style="margin-left: 30px" class="breadcrumb">活动管理 <span class="c-gray en">&gt;</span> 作品评论列表  <a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新" >刷新</a></nav>
<div class="page-container">
    <div th:if="${retInfo.obj.total_record > 0}">
    <th:block  th:each="bean: ${retInfo.obj.list}">
        <div class="CommentUser" style="margin-left: 20px">
            <img th:src="${bean.head_img}" class="userPortrait" alt="头像"/>
            <div class="commentBox">
                <div class="userName">
                    <div th:text="${bean.nick_name}"></div>
                    <span class="time" th:text="${#dates.format(bean.comments_time, 'yyyy-MM-dd HH:mm:ss')}"></span>

                </div>
                <p class="userComment textOverflow" th:text="${bean.comments_content}"></p>
                <div class="footer">
                    <div class="operation1">
                        <div class="commentIcon el-icon-chat-line-round">
                            <img src="/static/v5/img/comment.png" alt="">
                            <b th:text="${bean.replys_size}"></b>
                            <span class="blue openComment" th:if="${bean.replys_size > 0}">查看评论</span>
                        </div>
                    </div>
                </div>
                <!--            子评论-->
                <ul class="subCommitBox disNone subCommitId" th:if="${bean.replys_size > 0}">

                    <th:block  th:each="reply: ${bean.replys}">
                    <li class="CommentUser subComment">
                    <img th:src="${reply.head_img}" class="userPortrait" alt="头像"/>
                    <div class="commentBox">
                    <div class="userName">
                    <div th:text="${reply.nick_name}"></div>
                    <span class="time" th:text="${#dates.format(reply.comments_time, 'yyyy-MM-dd HH:mm:ss')}"></span>
                    </div>
                    <p class="userComment textOverflow" th:text="${reply.comments_content}"></p>
                    </div>
                    </li>
                    </th:block>
                </ul>

            </div>


        </div>
    </th:block>
    </div>
    <div th:if="${retInfo.obj.total_record == 0}" style="margin: 50px">
        无评论
    </div>
</div>



<script>

    let open = false;
    $('.openComment').click(function () {
        console.log()

        let subCommitId= $(this).parents('.commentBox').find('.subCommitId')
        open = !open
        if (subCommitId.hasClass('disNone')) {
            subCommitId.removeClass('disNone')
        } else {
            subCommitId.addClass('disNone')
        }
    })

</script>

<script type="text/javascript" src="/static/v5/js/kkpager.js"></script>
<div th:if="${retInfo.obj.total_record > 0}">
    <div style="margin: 0px 20px 0px 20px">
        <div id="kkpager"></div>
    </div>
    <script  th:inline="javascript">
        /*<![CDATA[*/
        var totalPage = [[${retInfo.obj.total_page}]];
        var totalRecords = [[${retInfo.obj.total_record}]];
        var pageNo = [[${retInfo.obj.current_page}]];
        var page_size = [[${retInfo.obj.page_size}]];
        var works_id = [[${retInfo.obj.works_id}]];

        /*]]>*/
        //init
        $(function() {

            if(!pageNo){
                pageNo = 1;
            }
            //生成分页
            //有些参数是可选的，比如lang，若不传有默认值
            kkpager.generPageHtml({
                pno : pageNo,
                //总页码
                total : totalPage,
                //总数据条数
                totalRecords : totalRecords,

                getLink : function(n){
                    var href = "/v5/activity/works/comments/list" + "?page_size=" + page_size  + "&current_page=" + n + "&token="  + sessionStorage.getItem("token") +
                    "&works_id=" + works_id
                    return href;
                }

            });
        });

    </script>
</div>

</body>
</html>
